<template>
  <div class="my">
    <div class="header">
      <div class="bind" v-if="!user.TJUserGameID" @click="bindGiftMask=true">
        <img src="../my/img/bind.png" alt>
      </div>
      <div class="title">我 的</div>
      <div class="bar">
        <router-link tag="span" to="/compile">编辑</router-link>
        <!-- <span @click="edit">编辑</span> -->
      </div>

      <div class="user">
        <div class="userIcon" @click="handleEncrypted">
          <img v-if="user.TxImg" :src="imgStr+user.TxImg" alt>
          <img v-else src="../../assets/img/ps_1.png" alt>
          <div class="mib mibYes" v-if="IsScuess"></div>
          <div class="mib mibNo" v-else></div>
        </div>
        <div class="userTxt">
          <div class="userName">
            <span :class="['t'+MemberOrder.color]">{{user.NickName}}</span>
            <i class="iconfont icon-unie66a" v-if="user.Gender=='1'"></i>
            <i class="iconfont icon-nv5" v-else style="font-size:17px; top:2px; color:#f88"></i>
            <!-- <i class="iconfont icon-nv5" v-if="user.Gender=='0'" style="font-size:17px; top:2px;"></i> -->
          </div>
          <div class="userId">I D : {{user.GameID}}</div>
          <div class="referrer">推荐人：{{user.TJUser}}</div>
          <div class="star">
            <span v-for="(item) in stars1" :key="item.id">
              <img src="./img/stars1.png" alt>
            </span>
            <span v-for="(item) in 12-stars1" :key="item.id">
              <img src="./img/stars2.png" alt>
            </span>
          </div>
        </div>
      </div>
      <div class="headerMsg">
        <div class="leftBox">
          <span class="box" @click="buygift">
            <template v-if="user.MemberOrder==5">
              <img src="./img/dlb1.png" alt>
            </template>
            <template v-else>
              <transition name="fade">
                <img class="leftBox_i" v-show="ishowImg" src="./img/dlb2.png" alt>
                <!-- <img v-show="!ishowImg" src="./img/dlb1.png" alt> -->
              </transition>
              <transition name="fade">
                <img class="leftBoxImg" v-show="!ishowImg" src="./img/dlb1.png" alt>
                <!-- <img v-show="!ishowImg" src="./img/dlb1.png" alt> -->
              </transition>
            </template>
          </span>
          <span class="t" :class="['t'+MemberOrder.color]">
            <i class="iconfont icon-zuanshi"></i>
            {{MemberOrder.txt}}
          </span>
          <div class="hr"></div>
        </div>
        <div class="rightBox">
          <!-- <span class="t">{{notice.value1}}</span>
          <span class="b">{{notice.value1}}</span>-->
          <span class="t" @click="clickAffiche()">
            <img src="./img/dlb.png" alt>
          </span>
          <!-- <span class="b">即可加入章鱼宝宝，可获得更多福利更多惊喜</span> -->
        </div>
      </div>
    </div>
    <div class="content">
      <div class="signIn" :class="isSignIn=='1'?'signIn_y':'signIn_n'">
        <!-- <img v-if="isSignIn=='1'" src="./img/Signed in_label.png" alt> -->
        <!-- <img v-else src="./img/Not signed in_label.png" alt> -->
      </div>
      <ul>
        <router-link tag="li" :to="item.url" v-for="(item) in arr" :key="item.id">
          <img :src="item.img" v-if="item.id=='2000000'" @click="clickbill1" alt>
          <span class="lispan" v-else-if="item.url=='/my'" @click="clickSignIn">
            <img :src="item.img" alt>
            <div class="qiu">
              <img :src="getqiu.img" alt>
              <span>{{getqiu.num}}%</span>
            </div>
          </span>
          <!-- <img :src="item.img" v-else-if="item.url=='/my?type=1'" @click="clickbill" alt> -->
          <img :src="item.img" v-else alt>
        </router-link>
      </ul>
    </div>
    <!-- 密保卡mask -->
    <div class="EncryptedMask" v-if="isEncryptedMask">
      <div class="main">
        <div class="title">
          <i class="iconfont iconfont1 icon-guanbi" @click="isEncryptedMask=false"></i>
          购买密保卡
        </div>
        <p>购买此密保卡将花费1000章鱼丸</p>
        <div class="btn" @click="butEncrypted">确认购买</div>
      </div>
    </div>
    <div class="payMask" v-if="isPayMask">
      <div class="mian">
        <div class="title">
          <i @click="isPayMask=false" class="iconfont icon-guanbi"></i> 请输入支付密码
        </div>
        <div class="content1">
          <div class="p">
            <div class="txt">购买密保卡</div>
          </div>
          <div class="txt">
            <span class="ps">PS</span>
            <span>1000</span>
          </div>
        </div>
        <div class="inputBox inputBox1" ref="inputBox">
          <input type="password" maxlength="6" v-model="passwordVal">
        </div>
      </div>
    </div>

    <!-- 密保卡短信mask -->
    <div class="encryptedInquire" v-if="isEncryptedInquire">
      <div class="main">
        <div class="title">
          <div class="iconfont icon-guanbi" @click="isEncryptedInquire=false"></div>密保卡查询
        </div>
        <p>密保卡查询需要短信验证，查询后 注意截图保存，每日查看3次。</p>
        <div class="inputBox">
          <label for="code">验证码</label>
          <input type="text" style="padding-left:3px;" v-model="YJELQss">
          <div class="btnBtn" v-if="isGetCodeBtn" @click="getCodeBtn">获取验证码</div>
          <div class="btnBtn1" v-else>获取验证码</div>
          <!-- btnBtn1 -->
        </div>
        <div class="sureBtn" @click="sureBtn">确定</div>
      </div>
    </div>

    <!-- 签到 -->
    <div class="singMask" v-if="isSingMask">
      <div class="singMain">
        <h2>
          恭喜获得
          <span style="color:#F85808">{{NowCount}}个</span> 章鱼丸
        </h2>
        <h3>已累计获得{{SumCount}}个</h3>
        <div class="btn" @click="isSingMask=false">确定</div>
      </div>
      <i class="iconfont icon-guanbi" @click="isSingMask=false"></i>
    </div>

    <!-- 绑定礼包码 弹窗 -->
    <div class="bindGiftCode" v-if="bindGiftMask">
      <div class="main">
        <div class="title">
          <div class="iconfont icon-guanbi" @click="bindGiftMask=false"></div>绑定
        </div>
        <input type="text" v-model="bindFriendID" placeholder="输入好友ID">

        <div class="btn" @click="BindGiftBagCode()">确定</div>
      </div>
    </div>

    <footer-nav class="footer_nav"/>
  </div>
</template>
<script>
import footerNav from "@/components/footerNav";
import { mapGetters } from "vuex";
import {
  getUserInfo,
  GetGGMessage,
  EncryptWx,
  getSinging,
  singingdeWK,
  payPassCard,
  sendPassCardInfo1,
  sendPassCardInfo,
  bindUserByNoPay
} from "../../api.js";
import { getGuid, openUrl, uncompileStr } from "../../utils/index";
import { hex_md5 } from "../../utils/md5";
import { Toast } from "mint-ui";
import axios from "axios";
import $ from "jquery";
export default {
  data() {
    return {
      bindGiftMask: false,
      bindFriendID: "",
      ishowImg: true,
      passwordVal: "",
      pwsVal: "",
      pws1: "",
      pws2: "",
      pws3: "",
      pws4: "",
      pws5: "",
      pws6: "",
      isPayMask: false,
      auth: "",
      IsScuess: "",
      MS: "",
      YJELQss: "",
      isGetCodeBtn: true,
      URL: "http://47.92.5.116:8099",
      mbUrl: "https://shield.912cc.com",
      isEncryptedInquire: false,
      isEncryptedMask: false,
      arr: [
        {
          img: require("./img/Account details.png"),
          url: "/account",
          id: "1"
        },
        {
          img: require("./img/chongwu.png"),
          url: "",
          id: "2000000"
        },
        {
          img: require("./img/qd.png"),
          url: "/my",
          id: "3"
        },
        {
          img: require("./img/Daily quotation.png"),
          url: "/market",
          id: "4"
        },
        {
          img: require("./img/jijing.png"),
          url: "/fund",
          id: "5"
        },
        {
          img: require("./img/bag.png"),
          url: "/bag",
          id: "6"
        },
        {
          img: require("./img/Exclusive.png"),
          url: "/download",
          id: "7"
        },
        {
          img: require("./img/Account security.png"),
          url: "/security",
          id: "8"
        },
        {
          img: require("./img/bill.png"),
          url: "/bill",
          id: "9"
        }
      ],
      stars1: 0,
      notice: {},
      isSignIn: "",
      affiche: [
        {
          txt: "各位章鱼宝宝,领取章鱼T恤衫，从这里进去领取",
          link: "http://www.912cc.com/mobilepage/buygood.aspx"
        },
        {
          txt: "点击领取章鱼大礼包，获得更多惊喜"
        }
      ],
      account: JSON.parse(localStorage.zyUserInfo).username,
      password: uncompileStr(JSON.parse(localStorage.zyUserInfo).password),

      NowCount: "",
      SumCount: "",
      isSingMask: false,
      isDonghua: false,
      isEnabled: true,
      numRw: ""
    };
  },
  computed: {
    ...mapGetters(["user", "imgStr"]),
    MemberOrder() {
      if (this.user.DJ == "0") {
        return { txt: "章鱼矿工", color: 1 };
      } else if (this.user.DJ == "1") {
        return { txt: "以太矿工", color: 2 };
      } else if (this.user.DJ == "2") {
        return { txt: "比特矿工", color: 3 };
      } else {
        return { txt: "章鱼宝宝", color: 0 };
      }
    },
    getqiu() {
      let num = this.numRw;
      var str = num.replace("%", "");
      str = str / 1;
      if (str >= 0 && str < 5) {
        return {
          num: str,
          img: require("./jdt/0.png")
        };
      } else if (str >= 5 && str < 15) {
        return {
          num: str,
          img: require("./jdt/10.png")
        };
      } else if (str >= 15 && str < 25) {
        return {
          num: str,
          img: require("./jdt/20.png")
        };
      } else if (str >= 25 && str < 35) {
        return {
          num: str,
          img: require("./jdt/30.png")
        };
      } else if (str >= 35 && str < 45) {
        return {
          num: str,
          img: require("./jdt/40.png")
        };
      } else if (str >= 45 && str < 55) {
        return {
          num: str,
          img: require("./jdt/50.png")
        };
      } else if (str >= 55 && str < 65) {
        return {
          num: str,
          img: require("./jdt/60.png")
        };
      } else if (str >= 65 && str < 75) {
        return {
          num: str,
          img: require("./jdt/70.png")
        };
      } else if (str >= 75 && str < 85) {
        return {
          num: str,
          img: require("./jdt/80.png")
        };
      } else if (str >= 85 && str < 95) {
        return {
          num: str,
          img: require("./jdt/90.png")
        };
      } else {
        return {
          num: str,
          img: require("./jdt/100.png")
        };
      }
    }
  },
  created() {
    this.getUserData();
    this.LoginGate();
    this.getSex();
  },
  mounted() {
    let timer = setInterval(() => {
      this.ishowImg = !this.ishowImg;
    }, 700);
  },
  watch: {
    passwordVal(v1, v2) {
      if (v1.length == 6) {
        this.butEncrypted();
      }
    }
  },
  methods: {
    // 绑定好友
    BindGiftBagCode() {
      if (!this.bindFriendID) {
        Toast({
          message: "请输入好友ID",
          duration: 2000
        });
        return;
      }
      bindUserByNoPay({
        ID: localStorage.zyUserId,
        LoginMachine: getGuid(),
        MC: this.bindFriendID
      })
        .then(res => {
          this.bindGiftMask = false;
          if (res.data.Success) {
            this.getUserData();
          }
          Toast({
            message: res.data.Content,
            duration: 2000
          });
          this.bindFriendID = "";
        })
        .catch(err => {
          console.log(err);
        });
    },
    //绑定礼包码 按钮
    buygift() {
      if (this.user.MemberOrder == 5) {
        Toast({
          message: "已购买",
          duration: 2000
        });
      } else {
        this.$router.push("/gift");
      }
    },
    inputWrite(txts) {
      if (!this.$refs.inputBox) {
        return;
      }
      var txts = this.$refs.inputBox.getElementsByTagName("input");
      let _this = this;
      for (var i = 0; i < txts.length; i++) {
        var t = txts[i];
        t.index = i;
        t.setAttribute("readonly", true);
        t.onkeyup = function() {
          this.value = this.value.replace(/^(.).*$/, "$1");
          var next = this.index + 1;
          if (next > txts.length - 1) {
            _this.butEncrypted();
          }
          if (txts[next] == undefined) {
            return;
          }
          txts[next].removeAttribute("readonly");
          txts[next].focus();
        };
      }
      txts[0].removeAttribute("readonly");
    },
    key_dow() {
      this.inputWrite();
    },
    getVal() {
      this.pwsVal =
        this.pws1 + this.pws2 + this.pws3 + this.pws4 + this.pws5 + this.pws6;
    },
    //倩倩 ：判断是否购买密保卡
    isBuyCard() {
      sendPassCardInfo({
        ID: this.account,
        JYEPass: hex_md5(this.password),
        LoginMachine: getGuid(),
        MC: 1
      }).then(res => {
        this.IsScuess = res.data.Content == "2" ? false : true;
        //是否启用
        this.securityCard();
      });
    },

    //密保账号验证
    LoginGate() {
      const token = localStorage.zyLoginToken.split(" ")[1];
      const username = JSON.parse(localStorage.zyUserInfo).username;
      const password = hex_md5(this.password);
      axios({
        method: "post",
        url: `${
          this.mbUrl
        }/api/Original/LoginGate?Account=${username}&password=${password}&machine=${getGuid()}&token=${token}`,
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        }
      }).then(res => {
        if (res.data.Success) {
          this.auth = res.data.Token;
          localStorage.zyAuth = res.data.Token;
          // this.securityCard(res.data.Token);
          this.isBuyCard();
        } else {
        }
      });
    },
    //神父：是否启用密保卡
    securityCard() {
      let _this = this;
      let id = localStorage.zyUserId;
      const username = JSON.parse(localStorage.zyUserInfo).username;
      let url = `${
        this.mbUrl
      }/api/SecurityCard/SecurityCardEnable?userid=${id}`;

      $.ajax({
        type: "POST",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded",
          account: username,
          loginmachine: getGuid(),
          auth: localStorage.zyAuth
        },
        success: function(result) {
          //购买未启用 重新生成
          if (_this.IsScuess && !result.IsScuess) {
            _this.SecurityCardGenerate();
          }
        }
      });
    },

    handleEncrypted() {
      this.isGetCodeBtn = true;
      if (this.IsScuess) {
        this.isEncryptedInquire = true;
        // this.$router.push("/encrypted");    //#endregion
      } else {
        // this.isEncryptedMask = true;
        this.passwordVal = "";
        this.isPayMask = true;
      }
    },
    getCodeBtn() {
      this.getYzCode(1);
    },
    sureBtn() {
      this.getYzCode(2);
    },

    getYzCode(MC) {
      sendPassCardInfo1({
        LoginMachine: getGuid(),
        ID: localStorage.zyUserId,
        MC: MC,
        YJELQss: this.YJELQss,
        MS: this.MS
      }).then(res => {
        this.isGetCodeBtn = false;
        this.MS = res.data.Content;
        if (res.data.Success) {
          if (MC == 2) {
            this.isEncryptedInquire = false;
            this.$router.push("/encrypted");
          }
        } else {
          this.isEncryptedInquire = false;
          Toast({
            message: res.data.Content,
            duration: 2000
          });
        }
      });
    },

    //SecurityCardGenerate 生成密保卡
    SecurityCardGenerate() {
      let _this = this;
      let gameid = localStorage.zyGameID;
      let userid = localStorage.zyUserId;
      const username = JSON.parse(localStorage.zyUserInfo).username;

      let url = `${this.mbUrl}/api/SecurityCard/SecurityCardGenerate?account=${
        this.account
      }&userid=${userid}`;
      $.ajax({
        type: "POST",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded",
          account: username,
          loginmachine: getGuid(),
          auth: this.auth
        },
        success: function(result) {
          _this.$router.push("/encrypted");
        },
        error: function() {
          Toast({
            message: "生成失败",
            duration: 2000
          });
        }
      });
    },

    // 购买密保卡 1000ps
    butEncrypted() {
      this.isEncryptedMask = false;
      payPassCard({
        ID: localStorage.zyUserId,
        LoginMachine: getGuid(),
        JYEPass: hex_md5(this.passwordVal)
      }).then(res => {
        this.isPayMask = false;
        if (res.data.Success) {
          //生成密保卡
          this.SecurityCardGenerate();
        } else {
          // this.SecurityCardGenerate();
          Toast({
            message: res.data.Content,
            duration: 2000
          });
        }
      });
    },
    clickAffiche() {
      openUrl("http://www.912cc.com/mobilepage/buygood.aspx");
    },
    //签到
    clickSignIn() {
      let id = localStorage.zyUserId;
      singingdeWK({
        ID: id,
        LoginMachine: getGuid()
      }).then(res => {
        if (res.data.Success) {
          this.getSex();
          const { NowCount, SumCount } = res.data.EntityList[0];
          this.SumCount = SumCount;
          this.NowCount = NowCount;
          this.isSingMask = true;
        } else {
          Toast({
            message: res.data.Content,
            duration: 3000
          });
        }
      });
    },
    getSex() {
      getSinging({
        ID: localStorage.zyUserId,
        LoginMachine: getGuid()
      }).then(res => {
        if (res.data.Success) {
          this.isSignIn = res.data.EntityList[0].jr;
        }
      });
    },
    clickbill() {
      Toast({
        message: "此功能暂未开放",
        duration: 3000
      });
      return false;
    },
    clickbill1() {
      let userData = JSON.parse(localStorage.zyUserData);
      let userid = userData.UserID;
      let zyUserInfo = JSON.parse(localStorage.zyUserInfo);
      let password = uncompileStr(zyUserInfo.password);
      console.log(password);
      openUrl(
        "http://cw.912cc.com/?userId=" +
          userid +
          "&checkCode=" +
          hex_md5(password) +
          "&isMyself=1#/"
      );
    },
    getUserData() {
      let id = localStorage.zyUserId;
      getUserInfo({ LoginMachine: getGuid(), ID: id }).then(res => {
        if (res.data && res.data.Success) {
          this.stars1 = parseInt(res.data.EntityList[0].StartCount);
          this.numRw = res.data.EntityList[0].RW;
          localStorage.zyUserData = JSON.stringify(res.data.EntityList[0]);
          this.$store.dispatch("setUser", res.data.EntityList[0]);
        } else {
          // this.$router.push("/login");
          Toast({
            message: res.data.Content,
            duration: 3000
          });
        }
      });

      GetGGMessage({ LoginMachine: getGuid() }).then(res => {
        this.notice = res.data.EntityList[0];
      });
    }
  },
  components: {
    footerNav
  }
};
</script>
<style lang="stylus" scoped>
.my {
  width: 7.5rem;
  margin: 0 auto;
  font-family: 'PingFang-SC-Medium';
  padding-bottom: 2px;
  box-sizing: border-box;

  .bindGiftCode {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .main {
      width: 7.04rem;
      height: 6.94rem;
      background: #FFF;
      border-radius: 0.2rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      .title {
        .iconfont {
          position: absolute;
          left: 15px;
          font-size: 20px;
        }

        width: 6.63rem;
        height: 1rem;
        line-height: 1rem;
        font-size: 16px;
        border-bottom: 1px solid rgba(137, 137, 137, 0.6);
        margin: 0 auto;
      }

      input {
        width: 5.5rem;
        height: 0.66rem;
        background: rgba(137, 137, 137, 0.6);
        border-radius: 6px;
        margin: 1.5rem auto;
        color: rgba(47, 46, 64, 1);
        font-size: 14px;
        padding-left: 5px;
      }

      .btn {
        width: 6.18rem;
        height: 1rem;
        line-height: 1rem;
        color: #fff;
        margin: 0.8rem auto;
        font-size: 20px;
        background: linear-gradient(-42deg, rgba(249, 71, 1, 1), rgba(250, 81, 5, 1), rgba(253, 110, 17, 1));
        box-shadow: 0px 3px 9px 0px rgba(91, 24, 0, 0.47);
        border-radius: 0.1rem;
      }
    }
  }

  .payMask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .mian {
      width: 7.04rem;
      height: 7.1rem;
      background: #FFF;
      border-radius: 0.2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      .title {
        width: 6.67rem;
        line-height: 1.08rem;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        margin: 0 auto;
        font-size: 16px;
        font-weight: 500;

        i {
          float: left;
        }
      }

      .content1 {
        width: 6.63rem;
        height: 3rem;
        margin: 0.5rem auto;
        border-bottom: 1px solid rgba(137, 137, 137, 1);
        text-align: center;
        box-sizing: border-box;
        padding-top: 0.5rem;

        .p {
          margin: 0.3rem auto;
          font-size: 14px;
        }

        .txt {
          font-weight: 500;

          .ps {
            font-size: 30px;
            display: inline-block;
            position: relative;
            bottom: 5px;
          }

          span {
            font-size: 40px;
          }
        }
      }

      .inputBox {
        width: 6.32rem;
        height: 0.93rem;
        display: flex;
        margin: 0.07rem auto;

        input {
          width: 1.03rem;
          flex: 1;
          border: 1px solid rgba(203, 203, 203, 1);
          text-align: center;
        }
      }

      .inputBox1 {
        input {
          width: 100%;
          text-align: left;
          letter-spacing: 0.81rem;
          padding-left: 0.5rem;
        }
      }
    }
  }

  .encryptedInquire {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;

    .main {
      width: 7.04rem;
      height: 6.94rem;
      background: #FFF;
      border-radius: 0.2rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      .title {
        .iconfont {
          position: absolute;
          left: 15px;
          font-size: 20px;
        }

        width: 6.63rem;
        height: 1rem;
        line-height: 1rem;
        font-size: 16px;
        border-bottom: 1px solid #898989;
        margin: 0 auto;
      }

      p {
        width: 80%;
        color: #898989;
        margin: 1rem auto;
        line-height: 20px;
      }

      .inputBox {
        display: flex;
        width: 90%;
        height: 0.6rem;
        line-height: 0.6rem;
        margin: 0 auto 0.8rem auto;
        font-size: 15px;
        text-align: center;

        input {
          width: 3rem;
          background: #D7D7D7;
          border-radius: 5px;
          margin: 0 5px;
        }

        .btnBtn {
          width: 2rem;
          background: #FF642C;
          color: #fff;
          border-radius: 0.06rem;
        }

        .btnBtn1 {
          width: 2rem;
          background: #666;
          color: #fff;
          border-radius: 0.06rem;
        }
      }

      .sureBtn {
        width: 6.18rem;
        height: 1rem;
        line-height: 1rem;
        background: linear-gradient(-42deg, rgba(249, 71, 1, 1), rgba(250, 81, 5, 1), rgba(253, 110, 17, 1));
        box-shadow: 0px 3px 9px 0px rgba(91, 24, 0, 0.47);
        border-radius: 0.1rem;
        color: #FFF;
        margin: 0.4rem auto;
        font-size: 20px;
      }

      .sureBtn1 {
        width: 6.18rem;
        height: 1rem;
        line-height: 1rem;
        background: #666;
        box-shadow: 0px 3px 9px 0px rgba(91, 24, 0, 0.47);
        border-radius: 0.1rem;
        color: #FFF;
        margin: 0.4rem auto;
        font-size: 20px;
      }
    }
  }

  .header {
    height: 4.76rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
    position: relative;
    padding-top: 1.2rem;
    box-sizing: border-box;

    .bind {
      width: 1.3rem;
      height: 0.28rem;
      // background: pink;
      position: absolute;
      top: 0.42rem;
      left: 0.2rem;
      z-index: 999;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      width: 100%;
      text-align: center;
      top: 0.42rem;
      left: 0;
      position: absolute;
      color: #FFF;
      font-size: 18px;
    }

    .bar {
      font-size: 14px;
      color: #fff;
      display: inline;
      position: absolute;
      top: 0.44rem;
      right: 0.24rem;
    }

    .user {
      position: relative;

      .userIcon {
        width: 1.67rem;
        height: 1.67rem;
        border-radius: 50%;
        margin: 0 30px;
        margin-top: 5px;
        overflow: hidden;
        position: relative;

        .mib {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0.35rem;
        }

        .mibNo {
          background: url('./img/not-Received.png');
          background-size: 100%;
        }

        .mibYes {
          background: url('./img/Received.png');
          background-size: 100%;
        }

        img {
          width: 100%;
          height: 100%;
        }
      }

      .userTxt {
        width: 4.5rem;
        height: 100%;
        position: absolute;
        right: 0.15rem;
        top: 0;

        .userName {
          height: 0.49rem;
          line-height: 0.49rem;
          background: #fff;
          color: #6CC166;
          border-radius: 15px;
          padding: 0 15px;
          box-sizing: border-box;
          font-size: 14px;
          margin-bottom: 5px;
          display: inline-block;

          .t1 {
            color: #007aff;
          }

          .t2 {
            color: #9162ff;
          }

          .t3 {
            color: #ff8400;
          }

          .t0 {
            color: #6cc166;
          }

          i {
            margin-left: 10px;
            color: #33B0FF;
            position: relative;
          }
        }

        .referrer, .userId {
          font-size: 13px;
          color: #fff;
          line-height: 25px;
        }

        .star {
          margin-top: 5px;

          img {
            width: 0.33rem;
            height: 0.32rem;
          }
        }
      }
    }

    .headerMsg {
      width: 7.04rem;
      height: 1.2rem;
      background: #fff;
      border-radius: 0.2rem;
      position: absolute;
      bottom: -32px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      padding-right: 5px;

      .leftBox {
        width: 1.65rem;
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        flex-direction: column;
        position: relative;

        .leftBoxImg {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          // background: pink;
          // background: url('./img/dlb1.png');
          // background-size: 100% 100%;
        }

        .leftBox_i {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        }

        .box {
          position: absolute;
          top: 0;
          width: 1rem;
          height: 0.96rem;
          background: url('./img/jx.png');
          background-size: 100% 100%;

          img {
            width: 70%;
            height: 95%;
            margin: 0 auto;
            display: block;
          }
        }

        .hr {
          width: 1px;
          height: 0.7rem;
          position: absolute;
          top: 50%;
          right: 0;
          background: #E6E6E6;
          transform: translateY(-50%);
        }

        span {
          display: inline-block;
          // line-height: 22px;
        }

        .t {
          position: absolute;
          bottom: 1px;
          font-size: 8px;

          i {
            position: relative;
            top: 2px;
          }
        }

        .t1 {
          color: #007aff;
        }

        .t2 {
          color: #9162ff;
        }

        .t3 {
          color: #ff8400;
        }

        .t0 {
          color: #6cc166;
        }

        .b {
          color: #878686;
          font-size: 8px;

          i {
            font-size: 10px;
          }
        }
      }

      .rightBox {
        flex: 1;
        font-size: 13px;
        display: flex;
        line-height: 22px;
        align-items: left; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        flex-direction: column;
        margin-left: 0.2rem;

        .t {
          // color: #989898;
          width: 4.12rem;
          height: 0.4rem;
          display: inline-block;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .b {
          color: #878686;
          font-size: 8px;
        }
      }
    }
  }

  .content {
    width: 7.04rem;
    height: 6.21rem;
    background: #fff;
    border-radius: 0.2rem;
    margin: 40px auto 70px auto;
    position: relative;

    .signIn {
      position: absolute;
      top: 0;
      right: 0;
      width: 0.99rem;
      height: 1.05rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .signIn_y {
      background: url('./img/Signed_in_label.png');
      background-size: 100% 100%;
    }

    .signIn_n {
      background: url('./img/Not_signed_in_label.png');
      background-size: 100% 100%;
    }

    ul {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center; /* 垂直居中 */
      justify-content: center; /* 水平居中 */

      li {
        width: 1.25rem;
        height: 1.4rem;
        margin: 15px 20px;

        img {
          width: 90%;
          margin: 0 auto;
          display: block;
        }

        .lispan {
          width: 100%;
          margin: 0 auto;
          display: inline-block;
          z-index: 99;
          position: relative;

          img {
            width: 100%;
            height: 100%;
            display: inline-block;
          }

          .qiu {
            width: 1rem;
            height: 1rem;
            // background: rgba(108, 193, 102, 0.8);
            display: inline-block;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: -2px;
            transform: translateX(-50%);

            img {
              width: 100%;
              height: 100%;
            }

            span {
              font-size: 12px;
              position: absolute;
              left: 50%;
              top: 0.28rem;
              transform: translateX(-50%);
              color: #009640;
            }
          }
        }
      }

      li:nth-child(2) {
        img {
          width: 74%;
        }
      }

      li:nth-child(3) {
        img {
          width: 86%;
        }
      }

      li:nth-child(4) {
        img {
          width: 96%;
        }
      }

      li:nth-child(6) {
        img {
          width: 60%;
        }
      }

      li:nth-child(7) {
        img {
          width: 108%;
        }
      }

      li:nth-child(8) {
        img {
          width: 81%;
        }
      }

      li:nth-child(9) {
        img {
          width: 51%;
        }
      }
    }
  }

  .EncryptedMask, .singMask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;

    .iconfont {
      font-size: 25px;
      color: #fff;
      position: absolute;
      left: 50%;
      top: 85%;
      transform: translate(-50%, -50%);
    }

    .iconfont1 {
      font-size: 25px;
      color: #666;
      position: absolute;
      left: 40px;
      top: 30px;
    }

    .singMain {
      width: 7.04rem;
      height: 7.5rem;
      border-radius: 0.2rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      background: url('./img/sign_in_btm.png');
      background-size: 100% 100%;

      h2 {
        width: 100%;
        position: absolute;
        top: 4.5rem;
        font-size: 18px;
      }

      h3 {
        width: 100%;
        position: absolute;
        top: 5rem;
        font-size: 16px;
        color: #989797;
      }

      .btn {
        width: 5.7rem;
        height: 1rem;
        line-height: 1rem;
        background: #FF642C;
        border-radius: 0.1rem;
        position: absolute;
        left: 50%;
        top: 6rem;
        transform: translateX(-50%);
        text-align: center;
        font-size: 18px;
        color: #FFF;
      }
    }

    .main {
      width: 7.04rem;
      height: 6.94rem;
      background: #FFF;
      border-radius: 0.2rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      .title {
        .iconfont {
          position: absolute;
          left: 15px;
          // top: 15px;
          font-size: 20px;
        }

        width: 6.63rem;
        height: 1rem;
        line-height: 1rem;
        font-size: 16px;
        border-bottom: 1px solid #898989;
        margin: 0 auto;
      }

      p {
        margin: 1.9rem auto;
      }

      .btn {
        width: 6.18rem;
        height: 1rem;
        line-height: 1rem;
        background: linear-gradient(-42deg, rgba(249, 71, 1, 1), rgba(250, 81, 5, 1), rgba(253, 110, 17, 1));
        box-shadow: 0px 3px 9px 0px rgba(91, 24, 0, 0.47);
        border-radius: 0.1rem;
        margin: 0.8rem auto;
        color: #FFF;
        font-size: 20px;
      }
    }
  }

  .footer_nav {
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
